<template>
  <div class="GoodsInfo">
    <div class="content" v-show="selfShow">
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="item in swipes" :key="item.id">
          <img v-lazy="item.src" alt="">
        </van-swipe-item>
      </van-swipe>
      <!--      商品价格区域-->
      <van-cell-group class="goods-price goods-price">
        <van-cell :title="goodsInfo.title"/>
        <div class="priceContent">
          <div class="text-price">
            <span class="now">现价:￥{{goodsInfo.sell_price}}</span>
            <span class="old">原价:￥{{goodsInfo.market_price}}</span>
          </div>
          <div class="changeNum">
            <span>购买数量: </span>
            <van-stepper class="inputNum" v-model="buyNum"/>
          </div>
          <div class="buttons">
            <van-button class="buyNow" type="primary">立即购买</van-button>
            <van-button type="danger" @click="addCart">加入购物车</van-button>
          </div>
        </div>
      </van-cell-group>
      <!--      商品信息区域-->
      <van-cell-group class="goods-message">
        <van-cell title="商品信息"/>
        <div class="message-content">
          <p>商品货号: {{goodsInfo.goods_no}}</p>
          <p>库存情况: {{goodsInfo.stock_quantity}}</p>
          <p>上架时间: {{goodsInfo.add_time}}</p>
        </div>
      </van-cell-group>
    </div>
    <h1 class="noReplace" v-show="!selfShow">对不起, 暂无该商品详细信息</h1>
  </div>
</template>

<script>
import moment from 'moment'
import { Toast } from 'vant'

export default {
  name: 'GoodsInfo',
  props: {
    goodsId: {
      type: String
    }
  },
  data: () => ({
    goodsInfo: {},
    swipes: [],
    selfShow: true,
    buyNum: 1
  }),
  created () {
    this.getGoodsList()
  },
  methods: {
    async getGoodsList () {
      // 获取商品信息
      const res = await this.$http.getGoodsInfo(this.goodsId)
      if (res.status === 1) {
        this.selfShow = false
        return
      }
      this.goodsInfo = res.message
      this.goodsInfo.add_time = moment(this.goodsInfo.add_time).format('YYYY年MM月DD日 HH:mm:ss')

      // 获取商品相关轮播图片
      const { message } = await this.$http.getPicList(this.goodsId)
      this.swipes = message
    },
    addCart: function () { // 加入购物车
      // 获取购物车信息
      const cart = JSON.parse(localStorage.getItem('cart')) || []
      // 将购买的数量加入商品信息中
      this.goodsInfo.count = this.buyNum
      this.goodsInfo.selected = true
      this.goodsInfo.src = this.swipes[0].src
      // 判断商品是否在购物车里有,没有就添加,有就增加数量
      const flag = cart.some(el => {
        if (el.id === this.goodsInfo.id) {
          el.count += this.buyNum
          return true
        }
      })
      if (!flag) cart.push(this.goodsInfo)
      localStorage.setItem('cart', JSON.stringify(cart))
      Toast('加入购物车成功')
    }
  }
}
</script>

<style lang="scss" scoped>
  .GoodsInfo {
    padding: 40px 20px 50px;

    .content {
      .my-swipe .van-swipe-item {
        color: #fff;
        height: 300px;
        text-align: center;

        img {
          height: 100%;
        }
      }

      .goods-price {
        margin-top: 30px;
        border: 1px solid #eeeeee;

        .van-cell__title {
          font-size: 28px;
          font-weight: bold;
          height: 40px;
          line-height: 40px;
          color: #333333;
        }

        .priceContent {
          padding: 16px;

          .text-price {
            font-size: 20px;

            .now {
              color: red;
              margin-right: 30px;
            }

            .old {
              color: #999999;
              text-decoration: line-through;
              font-size: 16px;
            }
          }

          .changeNum {
            display: flex;
            margin-top: 20px;
            align-items: center;
            font-size: 18px;

            .inputNum {
              margin-left: 20px;
            }
          }

          .buttons {
            margin-top: 20px;
            display: flex;
            align-items: center;

            button {
              padding: 20px 30px;
            }

            .buyNow {
              margin-right: 50px;
            }
          }
        }
      }

      .goods-message {
        margin-top: 30px;
        border: 1px solid #eeeeee;
        font-size: 14px;

        .van-cell__title {
          font-size: 16px;
          font-weight: bold;
        }

        .message-content {
          padding: 0 16px;
        }
      }
    }

    .noReplace {
      color: #999999;
      text-align: center;
    }
  }
</style>
